<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Markdown | hez2010</title>
  
  
  
  <!--link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.10.0/styles/github-gist.min.css"-->
  
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/9.10.0/styles/github-gist.min.css">

  
<link rel="stylesheet" href="/css/style.css">

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.1.1"></head>

<body>
<div class="Shell">
    <aside class='SideBar'>
    <section class='avatar' style="background-image: url()">
        <div class='av-pic' style="background-image: url(/assets/avatar.jpg)">
        </div>
    </section>
    <section class='menu'>
        <div>hez2010</div>
        
            <div>软件工程导论</div>
        
        <ul>
          
            <a href="/" class="Btn">
              <li>Home</li>
            </a>  
          
            <a href="/archives/" class="Btn">
              <li>Archive</li>
            </a>  
          
        </ul>
    </section>
    <section class="media">
        
            
                <a target="_blank" rel="noopener" href="https://github.com/hez2010">
                    <img src="/assets/github.svg" />
                </a>
            
        
    </section>
</aside>

    <div class="container">
        <div data-pager-shell>
            <div>
  <article class='ContentView'>
    <header class='PageTitle'>
        <h1>Markdown</h1>
    </header>

    <section>
      <h1 id="Cheat-Sheet-and-Test"><a href="#Cheat-Sheet-and-Test" class="headerlink" title="Cheat Sheet and Test"></a>Cheat Sheet and Test</h1><p>[TOC]</p>
<h2 id="Headers"><a href="#Headers" class="headerlink" title="Headers"></a>Headers</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs plain"># H1<br>## H2<br>### H3<br>#### H4<br>##### H5<br>###### H6<br>### Duplicate Header<br>### Duplicate Header<br></code></pre></td></tr></table></figure>

<a id="more"></a>

<h1 id="H1"><a href="#H1" class="headerlink" title="H1"></a>H1</h1><h2 id="H2"><a href="#H2" class="headerlink" title="H2"></a>H2</h2><h3 id="H3"><a href="#H3" class="headerlink" title="H3"></a>H3</h3><h4 id="H4"><a href="#H4" class="headerlink" title="H4"></a>H4</h4><h5 id="H5"><a href="#H5" class="headerlink" title="H5"></a>H5</h5><h6 id="H6"><a href="#H6" class="headerlink" title="H6"></a>H6</h6><h3 id="Duplicate-Header"><a href="#Duplicate-Header" class="headerlink" title="Duplicate Header"></a>Duplicate Header</h3><h3 id="Duplicate-Header-1"><a href="#Duplicate-Header-1" class="headerlink" title="Duplicate Header"></a>Duplicate Header</h3><h2 id="Paragraphs"><a href="#Paragraphs" class="headerlink" title="Paragraphs"></a>Paragraphs</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs plain">This is a paragraph.<br>I am still part of the paragraph.<br><br>New paragraph.<br></code></pre></td></tr></table></figure>

<p>This is a paragraph.<br>I am still part of the paragraph.</p>
<p>New paragraph.</p>
<h2 id="Inline"><a href="#Inline" class="headerlink" title="Inline"></a>Inline</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs plain">&#96;inline block&#96;<br><br>&lt;kbd&gt;ctrl&lt;&#x2F;kbd&gt;+&lt;kbd&gt;alt&lt;&#x2F;kbd&gt;+&lt;kbd&gt;del&lt;&#x2F;kbd&gt;<br><br>**bold 1** and __bold 2__<br><br>*italic 1*  and _italic 2_<br><br>~~strike~~<br><br><br>***bold 1 and italic 1***<br><br>___bold 2 and italic 2___<br><br>__*bold 2 and italic 1*__<br><br>**_bold 1 and italic 2_**<br><br><br>~~*strike italic 1*~~ and *~~strike italic 2~~*<br><br>~~_strike italic 2_~~ and  _~~strike italic 2~~_<br><br><br>~~**strike bold 1**~~ and **~~strike bold 1~~**<br><br>~~__strike bold 2__~~ and __~~strike bold 2~~__<br><br><br>~~***strike italic 1 bold 1***~~ and ***~~strike italic 1 bold 1~~***<br><br>~~___strike italic 2 bold 2___~~ and ___~~strike italic 2 bold 2~~___<br><br>**~~*strike italic 1 bold 1*~~** and *~~**strike italic 1 bold 1**~~*<br><br>__~~_strike italic 2 bold 2_~~__ and _~~__strike italic 2 bold 2__~~_<br><br>**~~_strike italic 2 bold 1_~~** and _~~**strike italic 2 bold 1**~~_<br><br>__~~*strike italic 1 bold 2*~~__ and *~~__strike italic 1 bold 2__~~*<br><br></code></pre></td></tr></table></figure>

<p><code>inline block</code></p>
<p><kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd></p>
<p><strong>bold 1</strong> and <strong>bold 2</strong></p>
<p><em>italic 1</em>  and <em>italic 2</em></p>
<p><del>strike</del></p>
<p><strong><em>bold 1 and italic 1</em></strong></p>
<p><strong><em>bold 2 and italic 2</em></strong></p>
<p><strong><em>bold 2 and italic 1</em></strong></p>
<p><strong><em>bold 1 and italic 2</em></strong></p>
<p><del><em>strike italic 1</em></del> and <em><del>strike italic 2</del></em></p>
<p><del><em>strike italic 2</em></del> and  <em><del>strike italic 2</del></em></p>
<p><del><strong>strike bold 1</strong></del> and <strong><del>strike bold 1</del></strong></p>
<p><del><strong>strike bold 2</strong></del> and <strong><del>strike bold 2</del></strong></p>
<p><del><strong><em>strike italic 1 bold 1</em></strong></del> and <strong><em><del>strike italic 1 bold 1</del></em></strong></p>
<p><del><strong><em>strike italic 2 bold 2</em></strong></del> and <strong><em><del>strike italic 2 bold 2</del></em></strong></p>
<p><strong><del><em>strike italic 1 bold 1</em></del></strong> and <em><del><strong>strike italic 1 bold 1</strong></del></em></p>
<p><strong><del><em>strike italic 2 bold 2</em></del></strong> and <em><del><strong>strike italic 2 bold 2</strong></del></em></p>
<p><strong><del><em>strike italic 2 bold 1</em></del></strong> and <em><del><strong>strike italic 2 bold 1</strong></del></em></p>
<p><strong><del><em>strike italic 1 bold 2</em></del></strong> and <em><del><strong>strike italic 1 bold 2</strong></del></em></p>
<h2 id="Links"><a href="#Links" class="headerlink" title="Links"></a>Links</h2><p>Footnote, reference sources are provided in separate markdowns files specified in frontmatter.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs plain">[Reference Link][1]<br><br>Footnotes[^1] have a label[^label] and a definition[^!DEF]<br><br>Web image<br>![Web Picture](http:&#x2F;&#x2F;www.revolunet.com&#x2F;static&#x2F;parisjs8&#x2F;img&#x2F;logo-revolunet-carre.jpg &quot;Web Picture&quot;)<br><br>Local image<br>![Local Picture](logo-revolunet-carre.jpg &quot;Local Picture&quot;)<br><br>contact@revolunet.com<br><br>@revolunet<br><br>Issue #1<br><br>https:&#x2F;&#x2F;github.com&#x2F;revolunet&#x2F;sublimetext-markdown-preview&#x2F;<br><br>This is a link https:&#x2F;&#x2F;github.com&#x2F;revolunet&#x2F;sublimetext-markdown-preview&#x2F;.<br><br>This is a link &quot;https:&#x2F;&#x2F;github.com&#x2F;revolunet&#x2F;sublimetext-markdown-preview&#x2F;&quot;.<br><br>With this link (https:&#x2F;&#x2F;github.com&#x2F;revolunet&#x2F;sublimetext-markdown-preview&#x2F;), it still works.<br><br>    [1]: https:&#x2F;&#x2F;github.com&#x2F;revolunet&#x2F;sublimetext-markdown-preview&#x2F;<br>    [^1]: This is a footnote<br>    [^label]: A footnote on &quot;label&quot;<br>    [^!DEF]: The footnote for definition<br></code></pre></td></tr></table></figure>

<p>[Reference Link][1]</p>
<p>Footnotes[^1] have a label[^label] and a definition[^!DEF]</p>
<p>Web image<br><img src="http://www.revolunet.com/static/parisjs8/img/logo-revolunet-carre.jpg" alt="Web Picture" title="Web Picture"></p>
<p>Local image<br><img src="logo-revolunet-carre.jpg" alt="Local Picture" title="Local Picture"></p>
<p><a target="_blank" rel="noopener" href="http://www.google.com/">www.google.com</a></p>
<p><a href="mailto:&#x63;&#111;&#x6e;&#x74;&#x61;&#x63;&#x74;&#x40;&#x72;&#x65;&#x76;&#x6f;&#108;&#x75;&#x6e;&#101;&#116;&#x2e;&#x63;&#x6f;&#109;">&#x63;&#111;&#x6e;&#x74;&#x61;&#x63;&#x74;&#x40;&#x72;&#x65;&#x76;&#x6f;&#108;&#x75;&#x6e;&#101;&#116;&#x2e;&#x63;&#x6f;&#109;</a></p>
<p>@revolunet</p>
<p>Issue #1</p>
<p><a target="_blank" rel="noopener" href="https://github.com/revolunet/sublimetext-markdown-preview/">https://github.com/revolunet/sublimetext-markdown-preview/</a></p>
<p>This is a link <a target="_blank" rel="noopener" href="https://github.com/revolunet/sublimetext-markdown-preview/">https://github.com/revolunet/sublimetext-markdown-preview/</a>.</p>
<p>This is a link “<a target="_blank" rel="noopener" href="https://github.com/revolunet/sublimetext-markdown-preview/&quot;">https://github.com/revolunet/sublimetext-markdown-preview/&quot;</a>.</p>
<p>With this link (<a target="_blank" rel="noopener" href="https://github.com/revolunet/sublimetext-markdown-preview/">https://github.com/revolunet/sublimetext-markdown-preview/</a>), it still works.</p>
<h2 id="Abbreviation"><a href="#Abbreviation" class="headerlink" title="Abbreviation"></a>Abbreviation</h2><p>Abbreviations source are found in a separate markdown file specified in frontmatter.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs plain">The HTML specification <br>is maintained by the W3C.<br><br>*[HTML]: Hyper Text Markup Language<br>*[W3C]:  World Wide Web Consortium<br></code></pre></td></tr></table></figure>

<p>The HTML specification<br>is maintained by the W3C.</p>
<h2 id="Unordered-List"><a href="#Unordered-List" class="headerlink" title="Unordered List"></a>Unordered List</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs plain">Unordered List<br><br>- item 1<br>    * item A<br>    * item B<br>        more text<br>        + item a<br>        + item b<br>        + item c<br>    * item C<br>- item 2<br>- item 3<br></code></pre></td></tr></table></figure>

<p>Unordered List</p>
<ul>
<li>item 1<ul>
<li>item A</li>
<li>item B<br>  more text<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
</li>
<li>item C</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h2 id="Ordered-List"><a href="#Ordered-List" class="headerlink" title="Ordered List"></a>Ordered List</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs plain">Ordered List<br><br>1. item 1<br>    1. item A<br>    2. item B<br>        more text<br>        1. item a<br>        2. item b<br>        3. item c<br>    3. item C<br>2. item 2<br>3. item 3<br></code></pre></td></tr></table></figure>

<p>Ordered List</p>
<ol>
<li>item 1<ol>
<li>item A</li>
<li>item B<br> more text<ol>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>
</li>
<li>item C</li>
</ol>
</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<h2 id="Task-List"><a href="#Task-List" class="headerlink" title="Task List"></a>Task List</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs plain">Task List<br><br>- [X] item 1<br>    * [X] item A<br>    * [ ] item B<br>        more text<br>        + [x] item a<br>        + [ ] item b<br>        + [x] item c<br>    * [X] item C<br>- [ ] item 2<br>- [ ] item 3<br></code></pre></td></tr></table></figure>

<p>Task List</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> item 1<ul>
<li><input checked="" disabled="" type="checkbox"> item A</li>
<li><input disabled="" type="checkbox"> item B<br>  more text<ul>
<li><input checked="" disabled="" type="checkbox"> item a</li>
<li><input disabled="" type="checkbox"> item b</li>
<li><input checked="" disabled="" type="checkbox"> item c</li>
</ul>
</li>
<li><input checked="" disabled="" type="checkbox"> item C</li>
</ul>
</li>
<li><input disabled="" type="checkbox"> item 2</li>
<li><input disabled="" type="checkbox"> item 3</li>
</ul>
<h2 id="Mixed-Lists"><a href="#Mixed-Lists" class="headerlink" title="Mixed Lists"></a>Mixed Lists</h2><p><code>Really Mixed Lists</code> should break with <code>sane_lists</code> on.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs plain">Mixed Lists<br><br>- item 1<br>    * [X] item A<br>    * [ ] item B<br>        more text<br>        1. item a<br>        2. itemb<br>        3. item c<br>    * [X] item C<br>- item 2<br>- item 3<br><br><br>Really Mixed Lists<br><br>- item 1<br>    * [X] item A<br>    - item B<br>        more text<br>        1. item a<br>        + itemb<br>        + [ ] item c<br>    3. item C<br>2. item 2<br>- [X] item 3<br></code></pre></td></tr></table></figure>

<p>Mixed Lists</p>
<ul>
<li>item 1<ul>
<li><input checked="" disabled="" type="checkbox"> item A</li>
<li><input disabled="" type="checkbox"> item B<br>  more text<ol>
<li>item a</li>
<li>itemb</li>
<li>item c</li>
</ol>
</li>
<li><input checked="" disabled="" type="checkbox"> item C</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<p>Really Mixed Lists</p>
<ul>
<li>item 1<ul>
<li><input checked="" disabled="" type="checkbox"> item A</li>
</ul>
<ul>
<li>item B<br>  more text<ol>
<li>item a</li>
</ol>
<ul>
<li>itemb</li>
<li><input disabled="" type="checkbox"> item c</li>
</ul>
</li>
</ul>
<ol start="3">
<li>item C</li>
</ol>
</li>
</ul>
<ol start="2">
<li>item 2</li>
</ol>
<ul>
<li><input checked="" disabled="" type="checkbox"> item 3</li>
</ul>
<h2 id="Dictionary"><a href="#Dictionary" class="headerlink" title="Dictionary"></a>Dictionary</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs plain">Dictionary<br>:   item 1<br><br>    item 2<br><br>    item 3<br></code></pre></td></tr></table></figure>

<dl><dt>Dictionary</dt><dd>item 1</dd></dl><pre><code>item 2

item 3</code></pre>
<h2 id="Blocks"><a href="#Blocks" class="headerlink" title="Blocks"></a>Blocks</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs plain">This is a block.<br><br>This is more of a block.<br><br></code></pre></td></tr></table></figure>

<pre><code>This is a block.

This is more of a block.</code></pre>
<h2 id="Block-Quotes"><a href="#Block-Quotes" class="headerlink" title="Block Quotes"></a>Block Quotes</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">&gt; This is a block quote<br>&gt;&gt; How does it look?<br></code></pre></td></tr></table></figure>

<blockquote>
<p>This is a block quote.</p>
<blockquote>
<p>How does it look?<br>I think it looks good.</p>
</blockquote>
</blockquote>
<h2 id="Fenced-Block"><a href="#Fenced-Block" class="headerlink" title="Fenced Block"></a>Fenced Block</h2><p>Assuming guessing is not enabled.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs plain">&#96;&#96;&#96;<br>&#x2F;&#x2F; Fenced **without** highlighting<br>function doIt() &#123;<br>    for (var i &#x3D; 1; i &lt;&#x3D; slen ; i^^) &#123;<br>        setTimeout(&quot;document.z.textdisplay.value &#x3D; newMake()&quot;, i*300);<br>        setTimeout(&quot;window.status &#x3D; newMake()&quot;, i*300);<br>    &#125;<br>&#125;<br>&#96;&#96;&#96;<br><br>&#96;&#96;&#96;javascript<br>&#x2F;&#x2F; Fenced **with** highlighting<br>function doIt() &#123;<br>    for (var i &#x3D; 1; i &lt;&#x3D; slen ; i^^) &#123;<br>        setTimeout(&quot;document.z.textdisplay.value &#x3D; newMake()&quot;, i*300);<br>        setTimeout(&quot;window.status &#x3D; newMake()&quot;, i*300);<br>    &#125;<br>&#125;<br>&#96;&#96;&#96;<br></code></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs plain">&#x2F;&#x2F; Fenced **without** highlighting<br>function doIt() &#123;<br>    for (var i &#x3D; 1; i &lt;&#x3D; slen ; i^^) &#123;<br>        setTimeout(&quot;document.z.textdisplay.value &#x3D; newMake()&quot;, i*300);<br>        setTimeout(&quot;window.status &#x3D; newMake()&quot;, i*300);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// Fenced **with** highlighting</span><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">doIt</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i &lt;= slen ; i^^) &#123;<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-string">&quot;document.z.textdisplay.value = newMake()&quot;</span>, i*<span class="hljs-number">300</span>);<br>        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-string">&quot;window.status = newMake()&quot;</span>, i*<span class="hljs-number">300</span>);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h2 id="Tables"><a href="#Tables" class="headerlink" title="Tables"></a>Tables</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs plain">| _Colors_      | Fruits          | Vegetable         |<br>| ------------- |:---------------:| -----------------:|<br>| Red           | *Apple*         | [Pepper](#Tables) |<br>| ~~Orange~~    | Oranges         | **Carrot**        |<br>| Green         | ~~***Pears***~~ | Spinach           |<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th><em>Colors</em></th>
<th align="center">Fruits</th>
<th align="right">Vegetable</th>
</tr>
</thead>
<tbody><tr>
<td>Red</td>
<td align="center"><em>Apple</em></td>
<td align="right">Pepper</td>
</tr>
<tr>
<td><del>Orange</del></td>
<td align="center">Oranges</td>
<td align="right"><strong>Carrot</strong></td>
</tr>
<tr>
<td>Green</td>
<td align="center"><del><strong><em>Pears</em></strong></del></td>
<td align="right">Spinach</td>
</tr>
</tbody></table>
<h2 id="Smart-Strong"><a href="#Smart-Strong" class="headerlink" title="Smart Strong"></a>Smart Strong</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs plain">Text with double__underscore__words.<br><br>__Strong__ still works.<br><br>__this__works__too__<br></code></pre></td></tr></table></figure>

<p>Text with double__underscore__words.</p>
<p><strong>Strong</strong> still works.</p>
<p><strong>this__works__too</strong></p>
<h2 id="Smarty"><a href="#Smarty" class="headerlink" title="Smarty"></a>Smarty</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs plain">&quot;double quotes&quot;<br><br>&#39;single quotes&#39;<br><br>da--sh<br><br>elipsis...<br></code></pre></td></tr></table></figure>

<p>“double quotes”</p>
<p>‘single quotes’</p>
<p>da–sh</p>
<p>elipsis…</p>
<h2 id="Attribute-List"><a href="#Attribute-List" class="headerlink" title="Attribute List"></a>Attribute List</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs plain">Normal Text<br><br>Modified Text<br>&#123;: style&#x3D;&quot;font-weight:bold;&quot; &#125;<br></code></pre></td></tr></table></figure>

<p>Normal Text</p>
<p>Modified Text<br>{: style=”font-weight:bold;” }</p>
<h2 id="Admonition"><a href="#Admonition" class="headerlink" title="Admonition"></a>Admonition</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs plain">!!! Attention &quot;Success!&quot;<br>    You can use inline ~~stuff~~ markup too!<br><br>!!! Hint &quot;Info!&quot;<br>    - Here is some info.<br>    - And some more<br><br>!!! Caution &quot;Warning!&quot;<br>    - [X] Make sure you turn off the stove<br>    - [X] Don&#39;t run with scissors<br><br>!!! Danger &quot;Alert!&quot;<br>    You really need to read [this](#admonition)!<br><br>!!! Question &quot;Question?&quot;<br>    Are you serious?<br><br>!!! Note &quot;Note&quot;<br>    :smile:<br><br>    &gt; Not all markup can be placed in these boxes, but you can fit all sorts of things in them. But you will notice that the styles don&#39;t always play nice with each other.  Additional CSS could fix this though.<br><br>    Stuff like _this_ works too.<br><br>    | _Colors_      | Fruits          | Vegetable    |<br>    | ------------- |:---------------:| ------------:|<br>    | Red           | *Apple*         | Pepper       |<br>    | ~~Orange~~    | Oranges         | **Carrot**   |<br>    | Green         | ~~***Pears***~~ | Spinach      |<br><br>!!! Unknown &quot;Title&quot;<br>    Default class style<br></code></pre></td></tr></table></figure>

<p>!!! Attention “Success!”<br>    You can use inline <del>stuff</del> markup too!</p>
<p>!!! Hint “Info!”<br>    - Here is some info.<br>    - And some more</p>
<p>!!! Caution “Warning!”<br>    - [X] Make sure you turn off the stove<br>    - [X] Don’t run with scissors</p>
<p>!!! Danger “Alert!”<br>    You really need to read <a href="#admonition">this</a>!</p>
<p>!!! Question “Question?”<br>    Are you serious?</p>
<p>!!! Note “Note”<br>    :smile:</p>
<pre><code>&gt; Not all markup can be placed in these boxes, but you can fit all sorts of things in them. But you will notice that the styles don&#39;t always play nice with each other.  Additional CSS could fix this though.

Stuff like _this_ works too.

| _Colors_      | Fruits          | Vegetable    |
| ------------- |:---------------:| ------------:|
| Red           | *Apple*         | Pepper       |
| ~~Orange~~    | Oranges         | **Carrot**   |
| Green         | ~~***Pears***~~ | Spinach      |</code></pre>
<p>!!! Unknown “Title”<br>    Default class style</p>
<h2 id="Github-Emoji"><a href="#Github-Emoji" class="headerlink" title="Github Emoji"></a>Github Emoji</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs plain">This is a test for emoji :smile:.  The emojis are images linked to github assets :octocat:.<br></code></pre></td></tr></table></figure>

<p>This is a test for emoji :smile:.  The emojis are images linked to github assets :octocat:.</p>
<h3 id="People"><a href="#People" class="headerlink" title="People"></a>People</h3><p>:+1::-1::alien::angel::anger::angry::anguished::astonished::baby::blue_heart::blush::boom::bow::bowtie::boy::bride_with_veil::broken_heart::bust_in_silhouette::busts_in_silhouette::clap::cold_sweat::collision::confounded::confused::construction_worker::cop::couple::couple_with_heart::couplekiss::cry::crying_cat_face::cupid::dancer::dancers::dash::disappointed::disappointed_relieved::dizzy::dizzy_face::droplet::ear::exclamation::expressionless::eyes::facepunch::family::fearful::feelsgood::feet::finnadie::fire::fist::flushed::frowning::fu::girl::goberserk::godmode::green_heart::grey_exclamation::grey_question::grimacing::grin::grinning::guardsman::haircut::hand::hankey::hear_no_evil::heart::heart_eyes::heart_eyes_cat::heartbeat::heartpulse::hurtrealbad::hushed::imp::information_desk_person::innocent::japanese_goblin::japanese_ogre::joy::joy_cat::kiss::kissing::kissing_cat::kissing_closed_eyes::kissing_heart::kissing_smiling_eyes::laughing::lips::love_letter::man::man_with_gua_pi_mao::man_with_turban::mask::massage::metal::muscle::musical_note::nail_care::neckbeard::neutral_face::no_good::no_mouth::nose::notes::ok_hand::ok_woman::older_man::older_woman::open_hands::open_mouth::pensive::persevere::person_frowning::person_with_blond_hair::person_with_pouting_face::point_down::point_left::point_right::point_up::point_up_2::poop::pouting_cat::pray::princess::punch::purple_heart::question::rage::rage1::rage2::rage3::rage4::raised_hand::raised_hands::raising_hand::relaxed::relieved::revolving_hearts::runner::running::satisfied::scream::scream_cat::see_no_evil::shit::skull::sleeping::sleepy::smile::smile_cat::smiley::smiley_cat::smiling_imp::smirk::smirk_cat::sob::sparkles::sparkling_heart::speak_no_evil::speech_balloon::star::star2::stuck_out_tongue::stuck_out_tongue_closed_eyes::stuck_out_tongue_winking_eye::sunglasses::suspect::sweat::sweat_drops::sweat_smile::thought_balloon::thumbsdown::thumbsup::tired_face::tongue::triumph::trollface::two_hearts::two_men_holding_hands::two_women_holding_hands::unamused::v::walking::wave::weary::wink::woman::worried::yellow_heart::yum::zzz:</p>
<h3 id="Nature"><a href="#Nature" class="headerlink" title="Nature"></a>Nature</h3><p>:ant::baby_chick::bear::bee::beetle::bird::blossom::blowfish::boar::bouquet::bug::cactus::camel::cat::cat2::cherry_blossom::chestnut::chicken::cloud::cow::cow2::crescent_moon::crocodile::cyclone::deciduous_tree::dog::dog2::dolphin::dragon::dragon_face::dromedary_camel::ear_of_rice::earth_africa::earth_americas::earth_asia::elephant::evergreen_tree::fallen_leaf::first_quarter_moon::first_quarter_moon_with_face::fish::foggy::four_leaf_clover::frog::full_moon::full_moon_with_face::globe_with_meridians::goat::hamster::hatched_chick::hatching_chick::herb::hibiscus::honeybee::horse::koala::last_quarter_moon::last_quarter_moon_with_face::leaves::leopard::maple_leaf::milky_way::monkey::monkey_face::moon::mouse::mouse2::mushroom::new_moon::new_moon_with_face::night_with_stars::ocean::octocat::octopus::ox::palm_tree::panda_face::partly_sunny::paw_prints::penguin::pig::pig2::pig_nose::poodle::rabbit::rabbit2::racehorse::ram::rat::rooster::rose::seedling::sheep::shell::snail::snake::snowflake::snowman::squirrel::sun_with_face::sunflower::sunny::tiger::tiger2::tropical_fish::tulip::turtle::umbrella::volcano::waning_crescent_moon::waning_gibbous_moon::water_buffalo::waxing_crescent_moon::waxing_gibbous_moon::whale::whale2::wolf::zap:</p>
<h3 id="Objects"><a href="#Objects" class="headerlink" title="Objects"></a>Objects</h3><p>:8ball::alarm_clock::apple::art::athletic_shoe::baby_bottle::balloon::bamboo::banana::bar_chart::baseball::basketball::bath::bathtub::battery::beer::beers::bell::bento::bicyclist::bikini::birthday::black_joker::black_nib::blue_book::bomb::book::bookmark::bookmark_tabs::books::boot::bowling::bread::briefcase::bulb::cake::calendar::calling::camera::candy::card_index::cd::chart_with_downwards_trend::chart_with_upwards_trend::cherries::chocolate_bar::christmas_tree::clapper::clipboard::closed_book::closed_lock_with_key::closed_umbrella::clubs::cocktail::coffee::computer::confetti_ball::cookie::corn::credit_card::crown::crystal_ball::curry::custard::dango::dart::date::diamonds::dollar::dolls::door::doughnut::dress::dvd::e-mail::egg::eggplant::electric_plug::email::envelope::envelope_with_arrow::euro::eyeglasses::fax::file_folder::fireworks::fish_cake::fishing_pole_and_fish::flags::flashlight::flipper::floppy_disk::flower_playing_cards::football::footprints::fork_and_knife::fried_shrimp::fries::game_die::gem::ghost::gift::gift_heart::golf::grapes::green_apple::green_book::guitar::gun::hamburger::hammer::handbag::headphones::hearts::high_brightness::high_heel::hocho::honey_pot::horse_racing::hourglass::hourglass_flowing_sand::ice_cream::icecream::inbox_tray::incoming_envelope::iphone::jack_o_lantern::jeans::key::kimono::lantern::ledger::lemon::lipstick::lock::lock_with_ink_pen::lollipop::loop::loud_sound::loudspeaker::low_brightness::mag::mag_right::mahjong::mailbox::mailbox_closed::mailbox_with_mail::mailbox_with_no_mail::mans_shoe::meat_on_bone::mega::melon::memo::microphone::microscope::minidisc::money_with_wings::moneybag::mortar_board::mountain_bicyclist::movie_camera::musical_keyboard::musical_score::mute::name_badge::necktie::newspaper::no_bell::notebook::notebook_with_decorative_cover::nut_and_bolt::oden::open_book::open_file_folder::orange_book::outbox_tray::package::page_facing_up::page_with_curl::pager::paperclip::peach::pear::pencil::pencil2::phone::pill::pineapple::pizza::postal_horn::postbox::pouch::poultry_leg::pound::purse::pushpin::radio::ramen::ribbon::rice::rice_ball::rice_cracker::rice_scene::ring::rugby_football::running_shirt_with_sash::sake::sandal::santa::satellite::saxophone::school_satchel::scissors::scroll::seat::shaved_ice::shirt::shoe::shower::ski::smoking::snowboarder::soccer::sound::space_invader::spades::spaghetti::sparkle::sparkler::speaker::stew::straight_ruler::strawberry::surfer::sushi::sweet_potato::swimmer::syringe::tada::tanabata_tree::tangerine::tea::telephone::telephone_receiver::telescope::tennis::toilet::tomato::tophat::triangular_ruler::trophy::tropical_drink::trumpet::tshirt::tv::unlock::vhs::video_camera::video_game::violin::watch::watermelon::wind_chime::wine_glass::womans_clothes::womans_hat::wrench::yen:</p>
<h3 id="Places"><a href="#Places" class="headerlink" title="Places"></a>Places</h3><p>:aerial_tramway::airplane::ambulance::anchor::articulated_lorry::atm::bank::barber::beginner::bike::blue_car::boat::bridge_at_night::bullettrain_front::bullettrain_side::bus::busstop::car::carousel_horse::checkered_flag::church::circus_tent::city_sunrise::city_sunset::cn::construction::convenience_store::crossed_flags::de::department_store::es::european_castle::european_post_office::factory::ferris_wheel::fire_engine::fountain::fr::fuelpump::gb::helicopter::hospital::hotel::hotsprings::house::house_with_garden::it::izakaya_lantern::japan::japanese_castle::jp::kr::light_rail::love_hotel::minibus::monorail::mount_fuji::mountain_cableway::mountain_railway::moyai::office::oncoming_automobile::oncoming_bus::oncoming_police_car::oncoming_taxi::performing_arts::police_car::post_office::railway_car::rainbow::red_car::rocket::roller_coaster::rotating_light::round_pushpin::rowboat::ru::sailboat::school::ship::slot_machine::speedboat::stars::station::statue_of_liberty::steam_locomotive::sunrise::sunrise_over_mountains::suspension_railway::taxi::tent::ticket::tokyo_tower::tractor::traffic_light::train::train2::tram::triangular_flag_on_post::trolleybus::truck::uk::us::vertical_traffic_light::warning::wedding:</p>
<h3 id="Symbols"><a href="#Symbols" class="headerlink" title="Symbols"></a>Symbols</h3><p>:100::1234::a::ab::abc::abcd::accept::aquarius::aries::arrow_backward::arrow_double_down::arrow_double_up::arrow_down::arrow_down_small::arrow_forward::arrow_heading_down::arrow_heading_up::arrow_left::arrow_lower_left::arrow_lower_right::arrow_right::arrow_right_hook::arrow_up::arrow_up_down::arrow_up_small::arrow_upper_left::arrow_upper_right::arrows_clockwise::arrows_counterclockwise::b::baby_symbol::back::baggage_claim::ballot_box_with_check::bangbang::black_circle::black_large_square::black_medium_small_square::black_medium_square::black_small_square::black_square_button::cancer::capital_abcd::capricorn::chart::children_crossing::cinema::cl::clock1::clock10::clock1030::clock11::clock1130::clock12::clock1230::clock130::clock2::clock230::clock3::clock330::clock4::clock430::clock5::clock530::clock6::clock630::clock7::clock730::clock8::clock830::clock9::clock930::congratulations::cool::copyright::curly_loop::currency_exchange::customs::diamond_shape_with_a_dot_inside::do_not_litter::eight::eight_pointed_black_star::eight_spoked_asterisk::end::fast_forward::five::four::free::gemini::hash::heart_decoration::heavy_check_mark::heavy_division_sign::heavy_dollar_sign::heavy_exclamation_mark::heavy_minus_sign::heavy_multiplication_x::heavy_plus_sign::id::ideograph_advantage::information_source::interrobang::keycap_ten::koko::large_blue_circle::large_blue_diamond::large_orange_diamond::left_luggage::left_right_arrow::leftwards_arrow_with_hook::leo::libra::link::m::mens::metro::mobile_phone_off::negative_squared_cross_mark::new::ng::nine::no_bicycles::no_entry::no_entry_sign::no_mobile_phones::no_pedestrians::no_smoking::non-potable_water::o::o2::ok::on::one::ophiuchus::parking::part_alternation_mark::passport_control::pisces::potable_water::put_litter_in_its_place::radio_button::recycle::red_circle::registered::repeat::repeat_one::restroom::rewind::sa::sagittarius::scorpius::secret::seven::shipit::signal_strength::six::six_pointed_star::small_blue_diamond::small_orange_diamond::small_red_triangle::small_red_triangle_down::soon::sos::symbols::taurus::three::tm::top::trident::twisted_rightwards_arrows::two::u5272::u5408::u55b6::u6307::u6708::u6709::u6e80::u7121::u7533::u7981::u7a7a::underage::up::vibration_mode::virgo::vs::wavy_dash::wc::wheelchair::white_check_mark::white_circle::white_flower::white_large_square::white_medium_small_square::white_medium_square::white_small_square::white_square_button::womens::x::zero:</p>
<h2 id="Insert"><a href="#Insert" class="headerlink" title="Insert"></a>Insert</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs plain">^^insert^^<br><br>^^*insert italic*^^  *^^insert italic 2^^*<br><br>^^_insert italic_^^  _^^insert italic 2^^_<br><br>^^**insert bold**^^  **^^insert bold 2^^**<br><br>^^__insert bold__^^  __^^insert bold 2^^__<br><br>^^***insert italic bold***^^  ***^^insert italic bold 2^^***<br><br>^^___insert italic bold___^^  ___^^insert italic bold 2^^___<br><br>**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*<br><br>__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_<br><br>**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_<br><br>__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*<br></code></pre></td></tr></table></figure>

<p>^^insert^^</p>
<p>^^<em>insert italic</em>^^  <em>^^insert italic 2^^</em></p>
<p>^^<em>insert italic_^^  _^^insert italic 2^^</em></p>
<p>^^<strong>insert bold</strong>^^  <strong>^^insert bold 2^^</strong></p>
<p>^^<strong>insert bold__^^  __^^insert bold 2^^</strong></p>
<p>^^*<strong>insert italic bold***^^  *</strong>^^insert italic bold 2^^***</p>
<p>^^<strong><em>insert italic bold___^^  ___^^insert italic bold 2^^</em></strong></p>
<p><strong>^^<em>insert italic bold</em>^^</strong>  <em>^^<strong>insert italic bold 2</strong>^^</em></p>
<p><strong>^^_insert italic bold_^^</strong>  <em>^^__insert italic bold 2__^^</em></p>
<p><strong>^^_insert italic bold_^^</strong>  <em>^^<strong>insert italic bold 2</strong>^^</em></p>
<p><strong>^^<em>insert italic bold</em>^^</strong>  <em>^^__insert italic bold 2__^^</em></p>
<h2 id="Progress"><a href="#Progress" class="headerlink" title="Progress"></a>Progress</h2><p>Progress bars are block elements and it is recommened to put a newline before and after.  But they will be recognized inline, but they will be on their own line.</p>
<p>Normally you would just globally set your additional classes: <code>progressbar(add_classes=candystripe-animate)</code>, but here we will demonstrate that it works with the <code>attr_list</code> extension.  It will take inline style.</p>
<p>To turn off level classes (which are used to decide special colors for certain percentages) you could just use <code>progressbar(level_class=False)</code>.</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs plain">| Test               | Result                                        |<br>|--------------------|-----------------------------------------------|<br>|Animated: 0%        |[&#x3D;0% &quot;0%&quot;]&#123;: .candystripe-animate&#125;             |<br>|Animated: 5%        |[&#x3D;5% &quot;5%&quot;]&#123;: .candystripe-animate&#125;             |<br>|Animated: 25%       |[&#x3D;25% &quot;25%&quot;]&#123;: .candystripe-animate&#125;           |<br>|Animated: 45%       |[&#x3D;45% &quot;45%&quot;]&#123;: .candystripe-animate&#125;           |<br>|Animated: 65%       |[&#x3D;65% &quot;65%&quot;]&#123;: .candystripe-animate&#125;           |<br>|Animated: 85%       |[&#x3D;85% &quot;85%&quot;]&#123;: .candystripe-animate&#125;           |<br>|Animated: 100%      |[&#x3D;100% &quot;100%&quot;]&#123;: .candystripe-animate&#125;         |<br>|Division Percentage |[&#x3D; 212.2&#x2F;537 &quot;212.2&#x2F;537 Testing division&quot;]     |<br>|No Label            |[&#x3D; 50%]                                        |<br>|Inline              |Before[&#x3D; 50% &quot;I&#39;m a block!&quot;]After              |<br>|Gloss and Animated  |[&#x3D; 50% &quot;Gloss&quot;]&#123;: .candystripe-animate .gloss&#125; |<br></code></pre></td></tr></table></figure>

<table>
<thead>
<tr>
<th>Test</th>
<th>Result</th>
</tr>
</thead>
<tbody><tr>
<td>Animated: 0%</td>
<td>[=0% “0%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 5%</td>
<td>[=5% “5%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 25%</td>
<td>[=25% “25%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 45%</td>
<td>[=45% “45%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 65%</td>
<td>[=65% “65%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 85%</td>
<td>[=85% “85%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Animated: 100%</td>
<td>[=100% “100%”]{: .candystripe-animate}</td>
</tr>
<tr>
<td>Division Percentage</td>
<td>[= 212.2/537 “212.2/537 Testing division”]</td>
</tr>
<tr>
<td>No Label</td>
<td>[= 50%]</td>
</tr>
<tr>
<td>Inline</td>
<td>Before[= 50% “I’m a block!”]After</td>
</tr>
<tr>
<td>Gloss and Animated</td>
<td>[= 50% “Gloss”]{: .candystripe-animate .gloss}</td>
</tr>
</tbody></table>
<h2 id="Neseted-Fences"><a href="#Neseted-Fences" class="headerlink" title="Neseted Fences"></a>Neseted Fences</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs plain">    &#96;&#96;&#96;<br>    This will still be parsed<br>    as a normal indented code block.<br>    &#96;&#96;&#96;<br><br>&#96;&#96;&#96;<br>This will still be parsed<br>as a fenced code block.<br>&#96;&#96;&#96;<br><br>- This is a list that contains multiple code blocks.<br><br>    - Here is an indented block<br><br>            &#96;&#96;&#96;<br>            This will still be parsed<br>            as a normal indented code block.<br>            &#96;&#96;&#96;<br><br>    - Here is a fenced code block:<br><br>        &#96;&#96;&#96;<br>        This will still be parsed<br>        as a fenced code block.<br>        &#96;&#96;&#96;<br><br>        &gt; &#96;&#96;&#96;<br>        &gt; Blockquotes?<br>        &gt; Not a problem!<br>        &gt; &#96;&#96;&#96;<br></code></pre></td></tr></table></figure>

<pre><code><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">This will still be parsed<br>as a normal indented code block.<br></code></pre></td></tr></table></figure></code></pre>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">This will still be parsed<br>as a fenced code block.<br></code></pre></td></tr></table></figure>

<ul>
<li><p>This is a list that contains multiple code blocks.</p>
<ul>
<li><p>Here is an indented block</p>
<pre><code>  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">This will still be parsed<br>as a normal indented code block.<br></code></pre></td></tr></table></figure></code></pre>
</li>
<li><p>Here is a fenced code block:</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">This will still be parsed<br>as a fenced code block.<br></code></pre></td></tr></table></figure>

<blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs plain">Blockquotes?<br>Not a problem!<br></code></pre></td></tr></table></figure>
</blockquote>
</li>
</ul>
</li>
</ul>
<h2 id="UML-Flow-Charts"><a href="#UML-Flow-Charts" class="headerlink" title="UML Flow Charts"></a>UML Flow Charts</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs plain">&#96;&#96;&#96;flow<br>st&#x3D;&gt;start: Start:&gt;http:&#x2F;&#x2F;www.google.com[blank]<br>e&#x3D;&gt;end:&gt;http:&#x2F;&#x2F;www.google.com<br>op1&#x3D;&gt;operation: My Operation<br>sub1&#x3D;&gt;subroutine: My Subroutine<br>cond&#x3D;&gt;condition: Yes<br>or No?:&gt;http:&#x2F;&#x2F;www.google.com<br>io&#x3D;&gt;inputoutput: catch something...<br><br>st-&gt;op1-&gt;cond<br>cond(yes)-&gt;io-&gt;e<br>cond(no)-&gt;sub1(right)-&gt;op1<br>&#96;&#96;&#96;<br></code></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs flow">st&#x3D;&gt;start: Start:&gt;http:&#x2F;&#x2F;www.google.com[blank]<br>e&#x3D;&gt;end:&gt;http:&#x2F;&#x2F;www.google.com<br>op1&#x3D;&gt;operation: My Operation<br>sub1&#x3D;&gt;subroutine: My Subroutine<br>cond&#x3D;&gt;condition: Yes<br>or No?:&gt;http:&#x2F;&#x2F;www.google.com<br>io&#x3D;&gt;inputoutput: catch something...<br><br>st-&gt;op1-&gt;cond<br>cond(yes)-&gt;io-&gt;e<br>cond(no)-&gt;sub1(right)-&gt;op1<br></code></pre></td></tr></table></figure>

<h2 id="UML-Sequence-Diagrams"><a href="#UML-Sequence-Diagrams" class="headerlink" title="UML Sequence Diagrams"></a>UML Sequence Diagrams</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs plain">&#96;&#96;&#96;sequence<br>Title: Here is a title<br>A-&gt;B: Normal line<br>B--&gt;C: Dashed line<br>C-&gt;&gt;D: Open arrow<br>D--&gt;&gt;A: Dashed open arrow<br>&#96;&#96;&#96;<br></code></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs sequence">Title: Here is a title<br>A-&gt;B: Normal line<br>B--&gt;C: Dashed line<br>C-&gt;&gt;D: Open arrow<br>D--&gt;&gt;A: Dashed open arrow<br></code></pre></td></tr></table></figure>

<h2 id="Math"><a href="#Math" class="headerlink" title="Math"></a>Math</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs plain">$p(x|y) &#x3D; \frac&#123;p(y|x)p(x)&#125;&#123;p(y)&#125;$, \(p(x|y) &#x3D; \frac&#123;p(y|x)p(x)&#125;&#123;p(y)&#125;\).<br><br>$$<br>E(\mathbf&#123;v&#125;, \mathbf&#123;h&#125;) &#x3D; -\sum_&#123;i,j&#125;w_&#123;ij&#125;v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j<br>$$<br><br>\[3 &lt; 4\]<br><br>\begin&#123;align&#125;<br>    p(v_i&#x3D;1|\mathbf&#123;h&#125;) &amp; &#x3D; \sigma\left(\sum_j w_&#123;ij&#125;h_j + b_i\right) \\<br>    p(h_j&#x3D;1|\mathbf&#123;v&#125;) &amp; &#x3D; \sigma\left(\sum_i w_&#123;ij&#125;v_i + c_j\right)<br>\end&#123;align&#125;<br></code></pre></td></tr></table></figure>

<p>$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, (p(x|y) = \frac{p(y|x)p(x)}{p(y)}).</p>
<p>$$<br>E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j<br>$$</p>
<p>[3 &lt; 4]</p>
<p>\begin{align}<br>    p(v_i=1|\mathbf{h}) &amp; = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \<br>    p(h_j=1|\mathbf{v}) &amp; = \sigma\left(\sum_i w_{ij}v_i + c_j\right)<br>\end{align}</p>


      

    </section>
    
      <section class='ArticleMeta'>
          <div>
            发布于&nbsp;
            <time datetime="2020-09-08T14:12:49.601Z" itemprop="datePublished">
              2020-09-08
            </time>
          </div>
          
      </section>
    
    
</article>

  
</div>

            <footer>
    <div>© 2021 - Steven He </div>
    <div>
        <span>
            Powered by <a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a>
        </span>
        ,
        <span>
            Theme - <a target="_blank" rel="noopener" href="https://github.com/nameoverflow/hexo-theme-icalm">Icalm</a>
        </span>
    </div>
</footer>

        </div>
    </div>
</div>

<script src="/js/pager/dist/singlepager.js"></script>

<script>
var sp = new Pager('data-pager-shell')

</script>
</body>
</html>